<template>
	<view class="uni-content">
		<!-- 顶部文字 -->
		<text class="uni-content-title-line mt10 mb20">完善账号信息</text>
		<!-- 基础表单校验 -->
		<uni-forms ref="userInfoForm" :rules="rules" :modelValue="formData" labelPosition="left">
			<uni-forms-item label="昵称" required name="nickName">
				<uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="性别">
				<uni-data-checkbox v-model="formData.sex" mode="button" selectedColor="#FF6600" :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item label="邮箱" required name="email">
				<uni-easyinput v-model="formData.email" placeholder="请输入电子邮箱" />
			</uni-forms-item>
			<uni-row>
				<uni-forms-item label="手机号" required name="phonenumber">
					<uni-easyinput v-model="formData.phonenumber" placeholder="请输入手机号码" />
				</uni-forms-item>
				<button size="mini" style="float: right;border: none;color: #f60;" plain open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">获取微信绑定手机号</button>
			</uni-row>
			<button class="orange-btn mt20 mb20" type="default" @click="submit()">提 交</button>
		</uni-forms>
	</view>
</template>

<script>
	import rules from '../common/js/validator.js';
	import config from '../common/js/config.js';
	const {
		appid,
		secret
	} = config
	export default {
		data() {
			return {
				formData: {
					id: "",
					nickName: "",
					sex: "",
					email: "",
					phonenumber: ""
				},
				rules,
				// 单选数据源
				sexs: [],
				defaultSex: ""
			}
		},
		onReady() {
			this.$refs.userInfoForm.setRules(this.rules)
		},
		onLoad() {
			//获取性别字典数据
			this.$dict('sys_user_sex').then((res) => {
				this.sexs = res
				this.defaultSex = res[0].dictValue
			})
		},
		onShow() {
			if (this.$isLogin(true)) {
				this.$syncUserInfo().then(() => {
					const userInfo = uni.getStorageSync('gkms-userInfo');
					let sexVal = userInfo.sex
					if (!sexVal || sexVal == 0) {
						sexVal = this.defaultSex
					}
					this.formData = {
						id: userInfo.id,
						nickName: userInfo.nickName,
						sex: sexVal,
						email: userInfo.email,
						phonenumber: userInfo.phonenumber
					}
				})
			}
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submit() {
				this.$refs.userInfoForm.validate().then((res) => {
					this.submitForm()
				}).catch((errors) => {
					console.log(errors);
				})
			},
			submitForm() {
				uni.showLoading({
					title: '提交中'
				});
				console.log('this.formData',this.formData);
				this.$post(this.$api.system.user.profile.update, this.formData).then(res => {
					uni.showToast({
						title: "保存成功",
						icon: 'success'
					});
					uni.setStorageSync("gkms-userInfo", res.data)
					uni.redirectTo({
						url: '/pages/ucenter/userinfo/index'
					});
				}).catch(e => {
					uni.showToast({
						title: e.data?.msg,
						icon: 'none'
					});
				})
			},
			getPhoneNumber(e) {
				uni.showLoading({
					title: '获取中'
				});
				this.$get("/wx/interface/getBindTel/" + e.detail.code).then(res => {
					if(res.msg === ""){
						uni.showToast({
							title: "获取手机号异常",
							icon: 'none'
						});
					} else {
						this.formData.phonenumber = res.msg
						uni.showToast({
							title: "获取成功",
							icon: 'success'
						});
					}
				}).catch(e => {
					uni.showToast({
						title: "获取手机号异常",
						icon: 'none'
					});
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "../common/style/uc-common.scss";
</style>
